<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :pagination="{ pageSize: 8 }"
    v-model:current="current"
    :total="500"
  >
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span class="nameCow">
          <smile-outlined />
          &ensp;医生姓名
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <a-divider type="vertical" />
        {{ record.name }}
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag v-for="tag in record.tags" :key="tag" :color="'green'">
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a-tooltip>
            <template #title>删除医生账户</template>
            <a @click="deleteUser()">删除</a>
          </a-tooltip>
          <a-divider type="vertical" class="mar" />
          <a-tooltip>
            <template #title>更多功能待开发</template>
            <a class="ant-dropdown-link">
              更多
              <down-outlined />
            </a>
          </a-tooltip>
        </span>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts">
import { SmileOutlined, DownOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { defineComponent, ref, reactive } from "vue";
import { useCounterStore } from "@/stores/counter";

export default defineComponent({
  components: { SmileOutlined, DownOutlined },
  setup() {
    const current = ref(1);
    const columns = [
      {
        name: "Name",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "账号",
        dataIndex: "account",
        key: "account",
      },
      {
        title: "职位",
        key: "tags",
        dataIndex: "tags",
      },
      {
        title: "功能",
        key: "action",
      },
    ];

    const data = reactive([
      {
        key: "1",
        name: "John Brown",
        account: "3122003322",
        tags: ["医生"],
      },
      {
        key: "2",
        name: "Jim Green",
        account: "3122003333",
        tags: ["医生"],
      },
      {
        key: "3",
        name: "Jim Green",
        account: "3122003333",
        tags: ["医生"],
      },
      {
        key: "4",
        name: "Jim Green",
        account: "3122003333",
        tags: ["医生"],
      },
      {
        key: "5",
        name: "Jim Green",
        account: "3122003333",
        tags: ["医生"],
      },
      {
        key: "6",
        name: "Jim Green",
        account: "3122003333",
        tags: ["医生"],
      },
      {
        key: "7",
        name: "Jim Green",
        account: "3122003333",
        tags: ["医生"],
      },
      {
        key: "8",
        name: "Jim Green",
        account: "3122003333",
        tags: ["医生"],
      },
      {
        key: "9",
        name: "Jim Green",
        account: "3122003333",
        tags: ["医生"],
      },
      {
        key: "10",
        name: "Jim Green",
        account: "3122003333",
        tags: ["医生"],
      },
      {
        key: "11",
        name: "Jim Green",
        account: "3122003333",
        tags: ["医生"],
      },
    ]);
    const store = useCounterStore();
    store.$subscribe((mutation, state) => {
      if (state.count == 1) {
        data.unshift({
          key: state.form.account,
          name: state.form.name,
          account: state.form.account,
          tags: ["医生"],
        });
        store.reduce();
        console.log(data);
      }
    });
    const deleteUser = () => {
      message.info("删除成功");
    };

    return {
      columns,
      data,
      current,
      deleteUser,
    };
  },
});
</script>
<style lang="less" scoped>
.nameCow {
  text-align: center;
}
.mar {
  margin: 0 5px;
}
</style>
